<template>
  <view id="ticket">
    <view class="son" v-for="(item, i) in sonlist" :key="i">
      <view class="sonleft">
        <image :src="item.img" class="quan" mode="widthFix" />
        <view class="sonfont">
          <view class="sontit"> {{ item.tit }}</view>
          <view class="sonnum">￥{{ item.num }}</view>
        </view>
      </view>
      <view class="sonbut"> 去购买 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const sonlist = ref([
  {
    img: "../../static/index/quan1.png",
    tit: "霸气mini卡",
    num: "20.00",
    url: "",
  },
  {
    img: "../../static/index/quan2.png",
    tit: "霸气心享卡",
    num: "58.00",
    url: "",
  },
  {
    img: "../../static/index/quan3.png",
    tit: "霸气分享卡",
    num: "108.00",
    url: "",
  },
  {
    img: "../../static/index/quan4.png",
    tit: "霸气欢聚卡",
    num: "198.00",
    url: "",
  },
]);
</script>

<style lang="scss">
#ticket {
  width: 100%;
  height: 100vh;
  padding-top: 25rpx;
  box-sizing: border-box;
  background-color: #f0f8fa;
  .son {
    width: 94%;
    margin: auto;
    padding: 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 25rpx;
    .sonleft {
      width: 70%;
      display: flex;
    }
    .quan {
      width: 45%;
    }
    .sonfont {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20rpx;
      color: #62615f;
      .sontit {
        font-size: 40rpx;
      }
      .sonnum {
        margin-bottom: 10rpx;
      }
    }
    .sonbut {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 100rpx;
      width: 25%;
      height: 30%;
      padding: 5rpx 10rpx;
      border-radius: 30rpx;
      box-sizing: border-box;
      text-align: center;
      border: solid 2rpx #b3bc45;
      color: #b3bc45;
    }
  }
}
</style>
